import React, { Component } from 'react'
import PropTypes from 'prop-types'
/**
 * 父组件在调用子组件的地方，添加一个自定义的属性
 * 如果自定义的属性的值是变量，boolean类型，number类型,数组，对象，null,undefined
 * 使用 {} 包裹数据
 * 子组件内部可以通过 `this.props.自定义属性名`  或者是 `props.自定义属性名`来显示数据
 * 如果想要验证数据类型，需要安装 `prop-types`模块
 * 根据 `组件.propTypes`验证数据类型，
 * 内部结构为 `{ 自定义属性名: PropTypes.数据类型 }`
 * 如果需要设定该属性是必须传递的，
 * 内部结构为 `{ 自定义属性名: PropTypes.数据类型.isRequired }`
 * 如果需要设定该属性的默认值，
 * 类组件（组件内部 `static defaultProps={ key: value}`）,
 * 函数式组件（`组件.defaultProps={key: value}`）
 * `Com.propTypes= { 
 *     name: PropTypes.oneOfType([
 *        PropTypes.string, 
 *        PropTypes.number
 *      ]).isRequired}`
 * */
class Child extends Component {
  state = { test: '测试' }
  static defaultProps = { count: 1000 }
  render () {
    console.log('child render')
    return (
      <div>child - { this.props.count }</div>
    )
  }
}
Child.propTypes = {
  count: PropTypes.number
}
export default class App extends Component {
  state = { count: 10 }
  render() {
    return (
      <div>
        <button onClick = { () => {
          this.setState({ count: this.state.count + 10 })
        }}>加</button>
        <Child count = { this.state.count }/>
        <Child/>
      </div>
    )
  }
}

